﻿<!DOCTYPE html>
<html>
	<head>
		<!-- 引入图标谷歌字体 -->
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<!-- 引入materialize css -->
		<link type="text/css" rel="stylesheet" href="../../Content/css/materialize.css" media="screen,projection" />
		<!-- 设置网页适配手机 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta charset="utf-8">
		<title>检验列表</title>
	</head>
	<body>
		<nav class="teal">
			<div class="nav-wrapper">
				<a href="#" class="brand-logo center">
					<i class="material-icons">burst_mode</i>
					检查报告
				</a>
			</div>
		</nav>
		<div id="app">
			<ul class="collapsible" data-collapsible="accordion">
				<li v-for="item in report_list">
					<div class="collapsible-header"><i class="material-icons">filter_drama</i>{{item.name}}</div>
					<div class="collapsible-body">
						<div class="collection" v-for="report in item.report_list">
							<a href="/Pages/PacsReportDetails" class="collection-item truncate">
								{{report.report_name}}
							</a>
						</div>
					</div>
				</li>
			</ul>

		</div>

		<!-- 引入jQuery -->
		<script src="../../Content/js/jQuery_3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入materialize（依赖jQuery） -->
		<script src="../../Content/js/materialize.js" type="text/javascript"></script>
		<!-- 引入vue.js -->
		<script src="../../Content/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入axios.js -->
		<script src="../../Content/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('.collapsible').collapsible();
			});
		</script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					report_list: [{
							name: '张全蛋',
							report_list: [{
								report_name: '肝功能检测，肾功能检测2（包括膀胱抑素），血脂血糖检测，风湿全套',
								report_date: '2018-10-01'
							}, {
								report_name: '肝功能检测，肾功能检测2（包括膀胱抑素），血脂血糖检测，风湿全套',
								report_date: '2018-10-01'
							}, {
								report_name: '肝功能检测，肾功能检测2（包括膀胱抑素），血脂血糖检测，风湿全套',
								report_date: '2018-10-01'
							}]
						},
						{
							name: '李小花',
							report_list: [{
								report_name: '肝功能检测，肾功能检测2（包括膀胱抑素），血脂血糖检测，风湿全套',
								report_date: '2018-10-01'
							}]
						},
						{
							name: '赵铁柱',
							report_list: [{
								report_name: '肝功能检测，肾功能检测2（包括膀胱抑素），血脂血糖检测，风湿全套',
								report_date: '2018-10-01'
							}]
						}
					]
				},
				methods: {}
			})
		</script>
	</body>
</html>
